<template>
  <div class="hm-dialog">
    <h2>友情提示</h2>
    <!-- 想自定义内容 在div内占位 使用slot标签 -->
    <div>
      <!-- 插槽默认内容语法
        就是在slot放置内容（默认内容-后背内容）
        用户如果传了标签 则使用自己传入的标签
        如果没传 使用默认的

        默认插槽可以不起名字 直接slot用就可以了
          默认插槽有完整的写法 <slot name="default"></slot>
          <template #default>

          </template>
          或者
          <template></template>

        具名插槽
        1. 给slot标签上加上name属性 为了区分 <slot name="xxx"></slot>
        2. 在组件标签里使用 需要配合template标签
            <template v-slot:xxx>  
              对应的结构内容
            </template>
            或者
            <template #xxx>  
              对应的结构内容
            </template>

         作用域插槽
          是什么 可以给slot标签上添加属性传值 这样我们在template中就有可以使用传过来的值
          怎么用
            1. slot加属性 任意加
            2. 添加的属性会被收集到一个对象里(这个vue内部已经实现好了) 
            3. template #插槽名=对象 
          为什么要用？(需要的时候可以用 也可以不用)
           他其实是给使用者提供便利， 使用者可以使用传过来的值，也可以不用   
                <template #xxx></template> 我不想用你的数据
               <template #xxx="obj"></template> 我想用你的数据就拿数据处理逻辑
       -->
      <slot name="default" :a="1" :b="'2'">
        <div>我是默认内容</div>
      </slot>
    </div>
    <!-- <button>关闭</button> -->
    <!-- 定义底部的结构 因为多出需要定制 所以需要使用具名插槽 -->
    <slot name="footer" :c="true" :d="{ x: 1, y: 2 }"></slot>
  </div>
</template>

<script>
/**
 * 父传子 只能传数据相关的
 * 如果想自定义结构 要用到插槽
 * 语法：
 * 1. 组件内用slot占位
 * 2. 使用组件时，在组件标签里面夹自己想要填充的结构
 */
export default {
  name: "HmDialog",
};
</script>

<style lang="less" scoped>
.hm-dialog {
  width: 400px;
  border: 2px solid black;
  padding: 10px 20px;
  div {
    margin: 10px 0;
  }
}
</style>